<% include ../layouts/navigation-bar-dashboard %>

<main class="container general-container">
    <div class="row h-100">
        <div class="col-12 my-auto">
            <h5 class="detail-title">
                Profile
            </h5>
            <div id="profile-card" class="card explorer-detail tabs-card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="profile-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="user-info-tab" data-toggle="tab" href="#user-info" role="tab" aria-controls="user-info" aria-selected="true">User info</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="personal-info-tab" data-toggle="tab" href="#personal-info" role="tab" aria-controls="personal-info" aria-selected="false">Personal info</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="profile-tab-content">
                    <div class="tab-pane fade show active" id="user-info" role="tabpanel" aria-labelledby="user-info-tab">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">
                                            Email address:
                                        </p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="detail-text"> 
                                            <%= user.emailAddress %>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">
                                            Public Key:
                                        </p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="p-word-break detail-text"> 
                                            <%= user.publicKey %> <i class="fas fa-paste js-tooltip js-copy icon-color" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" data-copy="<%= user.publicKey %>" title="Copy to clipboard"></i>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">
                                            Country:
                                        </p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="detail-text"> 
                                            <%= user.country %>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">
                                            State:
                                        </p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="detail-text"> 
                                            <%= user.state %>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">
                                            Phone:
                                        </p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="detail-text"> 
                                            <%= user.phone %>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">
                                            Address:
                                        </p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="detail-text"> 
                                            <%= user.address %>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="personal-info" role="tabpanel" aria-labelledby="personal-info-tab">
                        <ul class="list-group list-group-flush">
                            <% if(user.type == 'patient' || user.type == 'doctor') { %>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">
                                                Profile Picture:
                                            </p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <% if(user.type == 'patient') { %>
                                                <img class="rounded-circle dashboard-img" src="../../images/profiles/<%= user.patient[0].profilePicture %>">
                                            <% }else{ %>
                                                <img class="rounded-circle dashboard-img" src="../../images/profiles/<%= user.doctor[0].profilePicture %>">
                                            <% } %>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">
                                                First Name:
                                            </p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text">
                                                <% if(user.type == 'patient') { %>
                                                    <%= user.patient[0].name %>
                                                <% }else{ %>
                                                    <%= user.doctor[0].name %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">
                                                Last Name:
                                            </p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <% if(user.type == 'patient') { %>
                                                    <%= user.patient[0].lastName %>
                                                <% }else{ %>
                                                    <%= user.doctor[0].lastName %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">
                                                Birthday:
                                            </p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <% if(user.type == 'patient') { %>
                                                    <%= user.patient[0].birthdate.toISOString().split('T')[0] %>
                                                <% }else{ %>
                                                    <%= user.doctor[0].birthdate.toISOString().split('T')[0] %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Social security number:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text">
                                                <% if(user.type == 'patient') { %>
                                                    <% if(user.patient[0].socialSecurityNumber != '') { %>
                                                        <%= user.patient[0].socialSecurityNumber %>
                                                    <% }else{ %>
                                                        000-00-0000
                                                    <% } %>
                                                <% }else{ %>
                                                    <% if(user.doctor[0].socialSecurityNumber != '') { %>
                                                        <%= user.doctor[0].socialSecurityNumber %>
                                                    <% }else{ %>
                                                        000-00-0000
                                                    <% } %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            <% }else{ %>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">
                                                Legal Name:
                                            </p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <% if(user.type == 'insurance') { %>
                                                    <%= user.insurance[0].name %>
                                                <% }else{ %>
                                                    <%= user.provider[0].name %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Website:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <% if(user.type == 'insurance') { %>
                                                    <% if(user.insurance[0].website != '') { %>
                                                        <a href="<%= user.insurance[0].website %>" target="_blank"><%= user.insurance[0].website %></a>
                                                    <% }else{ %>
                                                        None
                                                    <% } %>
                                                <% }else{ %>
                                                    <% if(user.provider[0].website != '') { %>
                                                        <a href="<%= user.provider[0].website %>" target="_blank"><%= user.provider[0].website %></a>
                                                    <% }else{ %>
                                                        None
                                                    <% } %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">EIN:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <% if(user.type == 'insurance') { %>
                                                    <% if(user.insurance[0].EIN != '') { %>
                                                        <%= user.insurance[0].EIN %>
                                                    <% }else{ %>
                                                        00-0000000
                                                    <% } %>
                                                <% }else{ %>
                                                    <% if(user.provider[0].EIN != '') { %>
                                                        <%= user.provider[0].EIN %>
                                                    <% }else{ %>
                                                        00-0000000
                                                    <% } %>
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            <% } %>
                            <% if(user.type == 'provider') { %>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Provider Type:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text text-uppercase font-weight-bold">
                                                <% if(user.provider[0].type == 'clinic') { %>
                                                    <i class="far fa-hospital" aria-hidden="true"></i>
                                                <% }else if(user.provider[0].type == 'laboratory') { %>
                                                    <i class="fas fa-microscope" aria-hidden="true"></i>
                                                <% } else { %>
                                                    <i class="fas fa-capsules" aria-hidden="true"></i>
                                                <% } %> 
                                                <%= user.provider[0].type %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            <% } %>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <p class="detail-text profile-label">User Type:</p>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <p class="detail-text text-uppercase blue-word font-weight-bold"> 
                                            <% if(user.type == 'provider') { %>
                                                <i class="fas fa-clinic-medical" aria-hidden="true"></i>
                                            <% }else if(user.type == 'insurance') { %>
                                                <i class="fas fa-ambulance" aria-hidden="true"></i>
                                            <% }else if(user.type == 'doctor') { %>
                                                <i class="fas fa-user-md" aria-hidden="true"></i>
                                            <% } else { %>
                                                <i class="fas fa-user" aria-hidden="true"></i>
                                            <% } %>
                                            <%= user.type %>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <% if(user.type == 'doctor') { %>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Specialty:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <%= user.doctor[0].specialty %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            <% } %>
                            <% if(user.type == 'patient') { %>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Blood Type:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text"> 
                                                <%= user.patient[0].bloodType %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Allergies:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <% if(Array.isArray(user.patient[0].allergies)) { %>
                                                <ul id="allergies-ul">
                                                    <% user.patient[0].allergies.forEach(function(allergy)  { %>
                                                        <li class="detail-text text-capitalize"> 
                                                            <%= allergy %>
                                                        </li>
                                                    <% }); %>
                                                </ul>
                                            <% }else{ %>
                                                <p class="detail-text"> 
                                                    <%= user.patient[0].allergies %>
                                                </p>
                                            <% } %>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <p class="detail-text profile-label">Organ donor:</p>
                                        </div>
                                        <div class="col-12 col-md-8">
                                            <p class="detail-text">
                                                <% if(user.patient[0].donor) { %>
                                                    Yes
                                                <% }else{ %>
                                                    No
                                                <% } %>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<% include ../../../layouts/footer %>